import * as echarts from 'echarts';
import { deepMerge } from './util';

// 基础折线图
class Line {
  static defaultOptions = {
    smooth: false,
    symbol: {
      symbolSize: 6,
      color: '#00FFFF',
      shape: 'circle',
    },
    lineColor: '#00FFFF',
    tooltip: {
      backgroundColor: 'rgba(0,255,234, 0.3)',
      color: '#00FFFF',
      fontSize: 20,
      fontWeight: 800,
    },
    splitNumber: 3,
    xAxisLabel: {
      color: '#00FFEA',
      fontSize: 12,
      margin: 12,
    },
    yAxisLabel: {
      color: '#00FFEA',
      fontSize: 12,
      margin: 12,
      show: false,
    },
    lineName: ['进场', '出场'],
  };

  constructor(container, options = {}) {
    this.container = container;
    this.options = deepMerge({}, Line.defaultOptions, options);
    if (!this.chart) {
      this.chart = echarts.init(this.container);
    }
  }

  updateOptions() {
    const { smooth, symbol, xAxisLabel, yAxisLabel, lineName } = this.options;

    this.chart.setOption({
      legend: {
        show: true,
        bottom: 0,
        icon: 'circle',
        itemWidth: 8,
        itemGap: 20,
        data: lineName,
        textStyle: {
          color: '#1df7ff',
        },
      },
      grid: {
        top: 20,
        left: '0',
        right: '0',
        bottom: 30,
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: this.data[0].map((item) => item.label),
        axisTick: {
          show: false,
          alignWithLabel: true,
          lineStyle: {
            color: '#bbb',
          },
        },
        axisLabel: xAxisLabel,
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        splitNumber: 3,
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)',
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: yAxisLabel,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
        padding: 10,
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        borderColor: 'rgba(255, 255, 255, 0.2)',
        textStyle: {
          color: '#eee',
          width: 100,
          overflow: 'break',
        },
        renderMode: 'html',
        className: 'line-tip',
        formatter(value) {
          const axisValue = value[0].axisValue;
          return [
            axisValue,
            `${value[0].marker}${
              value[0].seriesName
            }:   <span style="font-weight: 800;margin-left: 10px;">${(value[0]
              .data
              ? value[0].data
              : '') || '-'}</span>`,
            `${value[1].marker}${
              value[1].seriesName
            }:   <span style="font-weight: 800;margin-left: 10px;">${(value[1]
              .data
              ? value[1].data
              : '') || '-'}</span>`,
          ].join('<br />');
        },
      },
      series: [
        {
          name: lineName[0],
          type: 'line',
          data: this.data[0].map((item) => item.value),
          symbol: symbol.shape,
          smooth: false,
          symbolSize: symbol.symbolSize,
          animationDuration: 500,
          lineStyle: {
            color: 'rgba(0,255,234,1)',
            width: 2,
          },
          itemStyle: {
            color: 'rgba(0,255,234,1)',
          },
          areaStyle: {
            color: 'rgba(0,255,234,0.2)',
          },
        },
        {
          name: lineName[1],
          type: 'line',
          barWidth: '60%',
          data: this.data[1].map((item) => item.value),
          symbol: symbol.shape,
          smooth,
          symbolSize: symbol.symbolSize,
          animationDuration: 500,
          lineStyle: {
            color: 'rgba(253,196,23,1)',
            width: 2,
          },
          itemStyle: {
            color: 'rgba(253,196,23,1)',
          },
          areaStyle: {
            color: 'rgba(253,196,23,0.2)',
          },
        },
      ],
    });
  }

  setData(data, options = {}) {
    this.data = data;
    this.options = deepMerge({}, this.options, options);
    this.updateOptions();
  }

  destroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
}

export default Line;
